<!--
 * @Author: wangming
 * @Date: 2021-10-22 17:48:20
 * @LastEditors: wangming
 * @LastEditTime: 2022-08-03 16:47:53
 * @FilePath: /hanma-paas-fed/Users/wm/瀚川/hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/historyText/index.vue
 * @Description: 
-->
<template>
  <div class="pt10 pb10">
    <div
      class="ks-row-middle-between pr15 ell h35 mb15 item"
      v-for="(i, index) in list"
      :key="index"
    >
      <div class="f12 g6 ell">
        <div class="ell mb5">
          <span>{{ i.createDate | moment }}</span>
        </div>
        <div class="ell">
          <span>{{ i.createBy }}</span>
        </div>
      </div>
      <div v-if="getHistoryForId !== i.id">
        <span class="table-actionItem">
          <el-button type="text" @click="getInfo(i.id)">预览</el-button>
        </span>
        <span class="table-actionItem">
          <el-popconfirm
            title="此操作有可能使现有内容丢失，确认恢复？"
            @confirm="rest(i.id)"
          >
            <el-button type="text" slot="reference">恢复</el-button>
          </el-popconfirm>
        </span>
      </div>
      <div v-else class="ks-col pl10">
        <el-tag size="mini" type="success">使用版本</el-tag>
      </div>
    </div>
    <div class="tc g9 f12" v-if="!list.length">暂无历史记录</div>
    <div class="tc mt10 pr10">
      <el-button
        type="text"
        icon="el-icon-arrow-down"
        @click="next"
        v-if="pageNo < totalPage"
        >查看更多</el-button
      >
      <div class="tc g9 f12" v-else>没有更多了</div>
    </div>
  </div>
</template>

<script>
import {
  getHmpageautoPageList,
  getHmpageautoInfoById,
} from "@/apis/paas/HmPageAutoController.js";
import DesignPreview from "@/components/DesignPreview/index.js";
import { mapGetters, mapActions } from "vuex";
import eventBus from "@/utils/eventBus";
export default {
  computed: {
    ...mapGetters(["getHistoryForId"]),
  },
  data() {
    return {
      list: [],
      pageNo: 1,
      totalPage: 1,
    };
  },
   mounted() {
    setTimeout(async () => {
      await this.gethistory();
      this.getHistoryForId || this.uploadId();
    }, 100);
    eventBus.$on("saveHistory", async () => {
      this.list = [];
      this.pageNo = 1;
      await this.gethistory();
      this.uploadId();
    });
  },
  destroyed() {
    eventBus.$off("saveHistory");
  },
  methods: {
    ...mapActions(["setHistoryId"]),
    next() {
      this.pageNo += 1;
      this.gethistory();
    },
    uploadId() {
      let { id } = this.list[0] || {};
      this.setHistoryId(id);
    },
    async gethistory() {
      let { data, totalPage } = await getHmpageautoPageList({
        pageNo: this.pageNo,
        pageSize: 20,
        pageId: this.$route.query.id,
      });
      this.totalPage = totalPage;
      this.list.push(...data);
    },
    async getJson(id) {
      let { json, createDate } = await getHmpageautoInfoById({ id });
      let { FormData, formList } = JSON.parse(json);
      return { FormData, formList, createDate };
    },
    async rest(id) {
      let { FormData, formList } = await this.getJson(id);
      eventBus.$emit("recoveryJson", { formList, FormData });
      this.setHistoryId(id);
    },
    async getInfo(id) {
      let { FormData, formList, createDate } = await this.getJson(id);
      DesignPreview.openDrawer({
        hmpageInfo: FormData,
        formList,
        title: "历史记录:" + new Date(createDate).format(),
      });
    },
  },
};
</script>

<style scoped lang="scss">
.item:hover {
  background-color: #f3f9ff;
}
</style>
